AJAX (Asynchronous JavaScript and XML) হল একটি ওয়েব ডেভেলপমেন্ট কৌশল, যা ব্রাউজার এবং সার্ভারের মধ্যে অ্যাসিনক্রোনাস (অভ্যন্তরীণ পেজ রিলোড ছাড়া) ডেটা আদান-প্রদানকে সক্ষম করে। AJAX এর মাধ্যমে, ওয়েব পেজগুলি পুরোপুরি লোড না করে শুধু প্রয়োজনীয় ডেটা লোড করতে পারে, যা ব্রাউজারকে আরও দ্রুত এবং ইন্টারঅ্যাকটিভ করে তোলে।
AJAX কাজ করে একাধিক স্টেপে:
// XMLHttpRequest তৈরি
const xhr = new XMLHttpRequest();
// সার্ভারে রিকোয়েস্ট পাঠানো
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
// রেসপন্স প্রাপ্তির পর ফাংশনটি চলবে
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data); // সার্ভার থেকে প্রাপ্ত ডেটা কনসোলে দেখানো হবে
} else {
console.error('Error:', xhr.status);
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
ব্যাখ্যা: এখানে GET
রিকোয়েস্টের মাধ্যমে সার্ভার থেকে ডেটা নেয়া হচ্ছে। XMLHttpRequest
এর মাধ্যমে সার্ভারের রেসপন্স পেলে তা কনসোলে প্রদর্শন করা হচ্ছে।
Fetch API হল XMLHttpRequest
এর একটি আধুনিক বিকল্প যা প্রমিস (Promise) ব্যবহারের মাধ্যমে কাজ করে।
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json()) // রেসপন্সটি JSON ফরম্যাটে রূপান্তরিত হবে
.then(data => {
console.log(data); // ডেটা কনসোলে প্রদর্শিত হবে
})
.catch(error => {
console.error('Error:', error);
});
ব্যাখ্যা: এখানে fetch
মেথড ব্যবহার করে সার্ভারে GET
রিকোয়েস্ট করা হয়েছে এবং প্রাপ্ত রেসপন্সকে JSON ফরম্যাটে রূপান্তর করে কনসোলে দেখানো হয়েছে। Fetch API সাধারণত আরও সহজ এবং সুসংগঠিত কোড লেখার সুযোগ দেয়।
AJAX হলো একটি শক্তিশালী টেকনিক যা ওয়েব পেজের কার্যকারিতা এবং পারফরম্যান্স উন্নত করতে সাহায্য করে। এর মাধ্যমে, আপনি পেজ রিলোড ছাড়া শুধুমাত্র প্রয়োজনীয় ডেটা সার্ভার থেকে আদান-প্রদান করতে পারেন, যা ইউজার এক্সপেরিয়েন্সকে অনেক উন্নত করে। AJAX আজকাল আধুনিক ওয়েব অ্যাপ্লিকেশনগুলির একটি অপরিহার্য অংশ হয়ে উঠেছে এবং এটি ব্যবহারের মাধ্যমে ইন্টারঅ্যাকটিভ ও দ্রুত ওয়েব অ্যাপ্লিকেশন তৈরি করা সম্ভব।